<template>
  <div class="page-basic">
    <a-form
      ref="basicRef"
      :model="formState"
      :rules="basicRules"
      :labelCol="{ style: { width: '84px' } }"
      :colon="false"
      labelAlign="right"
    >
      <div class="page-basic-hasBtn">
        <a-form-item label="图集名称" name="picture_name">
          <a-input
            v-model:value.trim="formState.picture_name"
            :maxlength="50"
            placeholder="请输入图集名称"
            class="w-[359px]"
          />
        </a-form-item>
      </div>
      <div class="page-basic-classify">
        <a-form-item label="图集分类" class="mr-[8px]">
          <a-cascader
            v-model:value="classList"
            change-on-select
            class="w-[200px]"
            :field-names="{ label: 'name', value: 'id', children: 'subcateg' }"
            :options="atlasList"
            placeholder="请选择图集分类"
            @change="handleSelectChange"
            :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
          >
            <template #suffixIcon>
              <a-tooltip placement="top" color="#fff">
                <template #title> 双击选中父级 </template>
                <div class="ellipsis-text">
                  <question-circle-outlined />
                </div>
              </a-tooltip>
            </template>
          </a-cascader>
        </a-form-item>
        <a-form-item name="picture_album_ids">
          <a-select
            v-model:value="formState.picture_album_ids"
            mode="multiple"
            class="w-[200px] mr-[8px]"
            max-tag-count="responsive"
            placeholder="请选择图集专辑"
            :options="albumList"
            @change="handleChange"
            :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
          ></a-select>
        </a-form-item>
        <a-form-item name="publish_state">
          <a-select
            v-model:value="formState.publish_state"
            placeholder="完结状态"
            class="w-[200px] mr-[8px]"
            :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
          >
            <a-select-option :value="1">已完结</a-select-option>
            <a-select-option :value="2">连载中</a-select-option>
          </a-select>
        </a-form-item>
      </div>
      <div class="page-basic-filmType" v-if="showFilmType && typeList.length > 0">
        <a-form-item label="图集类型" name="type_ids">
          <a-checkbox-group v-model:value="formState.type_ids" name="checkboxgroup" :options="typeList" />
        </a-form-item>
      </div>
      <div class="page-basic-hasBtn">
        <a-form-item label="作者" name="picture_author">
          <a-input
            v-model:value="formState.picture_author"
            placeholder="请输入作者"
            :maxlength="50"
            class="w-[359px]"
          />
        </a-form-item>
      </div>
      <div class="page-basic-hasBtn">
        <a-form-item label="是否付费" name="picture_price_type">
          <a-radio-group v-model:value="formState.picture_price_type" @change="handlePriceChange">
            <a-radio :value="1" class="mr-[95px]">免费</a-radio>
            <a-radio :value="2" class="mr-[95px]" disabled>付费</a-radio>
            <a-radio :value="3" class="mr-[6px]" disabled>点播</a-radio>
          </a-radio-group>
        </a-form-item>
      </div>
      <a-form-item name="picture_price" v-if="formState.picture_price_type !== 1" style="margin-left: 80px">
        <a-input
          v-model:value.trim="formState.picture_price"
          :maxlength="5"
          class="w-[359px]"
          :placeholder="formState.picture_price_type === 2 ? '请填写付费金币数量' : '请填写点播金币数量'"
          suffix="金币"
        />
      </a-form-item>
      <div class="page-basic-common">
        <div class="page-basic-common-title">图集简介</div>
        <a-form-item label="简介内容" name="picture_introduction">
          <a-textarea
            v-model:value="formState.picture_introduction"
            placeholder="请输入图集简介"
            show-count
            :maxlength="1000"
            class="w-[600px] h-[170px]"
          />
        </a-form-item>
      </div>
      <div class="page-basic-common">
        <div class="page-basic-common-title">图集封面</div>
        <div class="flex flex-nowrap">
          <a-form-item label="竖版封面">
            <div>
              <a-radio-group v-model:value="formState.picture_cover_vertical_type" @change="handleVerticalTypeChange">
                <a-radio :value="1" class="mr-[120px]">文件</a-radio>
                <a-radio :value="2">URL</a-radio>
              </a-radio-group>
              <div>
                <div class="flex items-center h-[32px]">
                  <UploadImage
                    v-if="formState.picture_cover_vertical_type === 1"
                    imgType="2"
                    fileType="0"
                    fileUrl="v1/common/upload"
                    @getImageInfo="getLineImageInfo"
                  >
                    <a-input-search
                      v-model:value="formState.picture_cover_vertical"
                      enter-button="上传文件"
                      @search="onLineSearch"
                      readOnly
                      class="w-[359px]"
                    />
                  </UploadImage>
                  <a-input
                    v-else
                    v-model:value="formState.picture_cover_vertical"
                    @blur="handleVerticalBlur"
                    placeholder="请输入URL地址"
                    class="w-[359px]"
                  />
                  <a-tooltip placement="right" class="ml-[16px]" color="#fff" v-if="verticalPreviewImage">
                    <template #title>
                      <img
                        alt="example"
                        class="max-w-[300px] max-h-[300px] w-[-webkit-fill-available]"
                        :src="verticalPreviewImage"
                      />
                    </template>
                    <a href="javascript:;" class="whitespace-nowrap">
                      <fund-view-outlined class="icon-preview text-[18px]" /> 预览
                    </a>
                  </a-tooltip>
                </div>
                <p class="source-introduce">
                  {{ storage.get('img_type') ? '支持' + storage.get('img_type') + '素材，' : '' }}
                  {{ storage.get('img_size') ? storage.get('img_size') + '以内；' : '' }}建议尺寸331*441px
                </p>
              </div>
            </div>
          </a-form-item>
          <a-form-item label="横版封面" class="ml-[126px]">
            <div>
              <a-radio-group
                v-model:value="formState.picture_cover_horizontal_type"
                @change="handleHorizontalTypeChange"
              >
                <a-radio :value="1" class="mr-[120px]">文件</a-radio>
                <a-radio :value="2">URL</a-radio>
              </a-radio-group>
              <div>
                <div style="display: flex; align-items: center; height: 32px">
                  <UploadImage
                    v-if="formState.picture_cover_horizontal_type === 1"
                    imgType="2"
                    fileType="0"
                    fileUrl="v1/common/upload"
                    @getImageInfo="getRowImageInfo"
                  >
                    <a-input-search
                      v-model:value="formState.picture_cover_horizontal"
                      enter-button="上传文件"
                      @search="onRowSearch"
                      readOnly
                      class="w-[359px]"
                    />
                  </UploadImage>
                  <a-input
                    v-else
                    v-model:value="formState.picture_cover_horizontal"
                    @blur="handleHorizontalBlur"
                    placeholder="请输入URL地址"
                    class="w-[359px]"
                  />
                  <a-tooltip placement="right" class="ml-[16px]" color="#fff" v-if="horizontalPreviewImage">
                    <template #title>
                      <img
                        v-if="formState.picture_cover_horizontal_type === 1"
                        alt="example"
                        class="max-w-[300px] max-h-[300px] w-[-webkit-fill-available]"
                        :src="horizontalPreviewImage"
                      />
                      <img
                        v-else
                        alt="example"
                        class="max-w-[300px] max-h-[300px] w-[-webkit-fill-available]"
                        :src="horizontalPreviewImage"
                      />
                    </template>
                    <a href="javascript:;" class="whitespace-nowrap">
                      <fund-view-outlined class="icon-preview text-[18px]" /> 预览
                    </a>
                  </a-tooltip>
                </div>
                <p class="source-introduce">
                  {{ storage.get('img_type') ? '支持' + storage.get('img_type') + '素材，' : '' }}
                  {{ storage.get('img_size') ? storage.get('img_size') + '以内；' : '' }}建议尺寸327*184px
                </p>
              </div>
            </div>
          </a-form-item>
        </div>
      </div>
      <div class="page-basic-common">
        <div class="page-basic-common-title">图片资源</div>
        选择方式
        <a-radio-group v-model:value="formState.file_type" style="margin-left: 10px" @change="handleTypeChange">
          <a-radio :value="1" class="mr-[120px]">文件</a-radio>
          <a-radio :value="2">URL</a-radio>
        </a-radio-group>
        <div class="address-content">
          <div class="address-content-file" v-for="(item, index) in formState.chapters">
            <div class="address-content-file-top">
              <div class="left-title">
                <a-tooltip placement="bottom" color="#fff" :overlayStyle="{ minWidth: '190px', whiteSpace: 'nowrap' }">
                  <template #title class="min-w-[190px]">
                    <span style="color: #5e5e5e" v-if="(siteType == 1 || siteType == 2) && formState.file_type == 1">
                      1个章节最多可添加100张图片
                    </span>
                    <span style="color: #5e5e5e" v-if="(siteType == 1 || siteType == 2) && formState.file_type == 2">
                      1、一行一张图片地址；<br />
                      2、图片URL资源地址，包含域名，可直接浏览；
                    </span>
                  </template>
                  <i class="iconfont icon-tishi text-[12px] text-[#595959] mr-0"></i>
                </a-tooltip>
                <div class="left-title-title">
                  <span class="mr-[5px]">第</span>
                  <div v-if="!item.is_edit">{{ item.chapter_no }}</div>
                  <a-input v-else v-model:value="item.chapter_no" class="w-[48px]" @blur="handleInput(item, index)" />
                  <span class="ml-[5px]">章</span>
                </div>
                <a-button type="primary" size="small" @click="changeSection(item, index)">{{
                  !item.is_edit ? '修改章节' : '完成'
                }}</a-button>
                <a-input
                  v-model:value="item.chapter_name"
                  :maxlength="50"
                  placeholder="请输入图集或章节名称（非必填）"
                  class="rounded-[3px] w-[220px]"
                >
                </a-input>
              </div>
              <div class="right-btn">
                <a-button type="primary" size="small" @click="clearAddress(index)">清空</a-button>
                <a-button type="primary" size="small" @click="reverseAddress(index)">反序</a-button>
                <a-button danger size="small" @click="deleteAddress(index)">删除</a-button>
              </div>
            </div>
            <div class="address-content-file-addressText" v-show="formState.file_type === 1">
              <div class="address-content-file-addressText-images">
                <multiple-upload
                  ref="uploadRef"
                  :maxCount="100"
                  :index="index"
                  :fileLists="formState.chapters[index]"
                  @getImageInfo="getAtlasSrc"
                />
              </div>
              <div class="address-content-file-addressText-buttons">
                <a-button type="primary" @click="startUpload(index)">开始上传 </a-button>
              </div>
            </div>
            <a-textarea
              class="address-content-file-textarea"
              v-show="formState.file_type === 2"
              v-model:value="formState.chapters[index].picture_url"
              placeholder="请输入图片地址"
            />
          </div>
        </div>
        <div class="ml-[72px] flex items-center text-[#0083FF] cursor-pointer">
          <div @click="addAddress"><i class="iconfont icon-add text-[16px] mr-[8px]"></i>添加章节</div>
        </div>
        <a-form-item label="图集状态" class="mt-[34px]">
          <a-radio-group v-model:value="formState.picture_status">
            <a-radio :value="1" class="mr-[120px]">启用</a-radio>
            <a-radio :value="2">禁用</a-radio>
          </a-radio-group>
        </a-form-item>
      </div>
    </a-form>
  </div>
</template>
<script lang="ts" setup>
import { computed, onMounted, reactive, ref, watch, inject } from 'vue'
import UploadImage from '@/components/components/upload-image/UploadImage.vue'
import MultipleUpload from './multipleUpload.vue'
import { message } from 'ant-design-vue'
import { formState, resetExtendFunc, type chaptersItem, isPopularity } from './state'
import apis from '@/apis'
import { storage } from '@/utils/storage'
import type { AlbumListData } from '@/types/site/atlas/atlasAlbum'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const baseUrl: any = inject('baseUrl')
const verticalPreviewImage: any = ref('') //竖版封面预览
const horizontalPreviewImage: any = ref('') //横版封面预览
const {
  site: { atlas_classify_list, add_atlas, detail_atlas, update_atlas, atlas_album_list, atlas_type_byClass, tag_list }
} = apis
const classList = ref<string[]>([])
const atlasList = ref() //图集分类数据
const albumList = ref<{ value: string; label: string }[]>([]) //专辑数据
const typeList = ref<{ value: string; label: string }[]>([]) //图集类型数据
const basicRef = ref()
const uploadRef = ref()
const siteId = storage.get('siteId') //站点id
const siteType = storage.get('siteType') //站点类型
const pictureId = ref('') //url携带图集id
const reg = /^(0|\+?[1-9][0-9]{0,4})$/ //五位正整数包含0
const chineseReg = /[\u4E00-\u9FA5\uF900-\uFA2D]{1,}/
const validatePrice = (rule: any, value: any, callback: any) => {
  if (!value) {
    if (formState.picture_price_type == 2) {
      return Promise.reject('请填写付费金币数量')
    } else {
      return Promise.reject('请填写点播金币数量')
    }
  } else if (!reg.test(value)) {
    return Promise.reject('请输入0-99999的金币数量')
  } else {
    return Promise.resolve()
  }
}
const basicRules = reactive({
  picture_name: [{ required: true, message: '请输入图集名称' }],
  picture_price: [{ required: false, validator: validatePrice, trigger: 'blur' }]
})

// const recursionFileMap = (obj: any) => {
//   let arr = [] as any
//   obj.map((item: any) => {
//     let obj = {
//       name1: '',
//       children: []
//     }
//     obj.name1 = item.name
//     if (item.children) {
//       obj.children = recursionFileMap(item.children)
//       // item.children
//     }
//     arr.push(obj)
//   })
//   return arr
// }
//树形数据数据处理 过滤所有子节点 递归
const parseTreeArray = (treeArray: any, disable: boolean) => {
  treeArray.forEach((item: any) => {
    if (item.subcateg && item.subcateg.length > 0) {
      if (item.status === 2) {
        item.disabled = true
        parseTreeArray(item.subcateg, true)
      }
    } else {
      for (var key in item) {
        if (Array.isArray(item[key]) && item[key].length === 0) {
          delete item[key]
        }
      }
      if (disable) {
        item.disabled = true
      } else {
        if (item.status === 2) {
          item.disabled = true
        }
      }
    }
  })
}
//获取分类接口
const getClassList = () => {
  atlas_classify_list({ site_id: siteId, keyword: undefined, categ_status: 1 }).then((res: any) => {
    if (res?.categ.length === 0) return []
    parseTreeArray(res?.categ, false)
    atlasList.value = res?.categ
  })
}
//图集分类change事件
const handleSelectChange = (value: any, selectedOptions: any) => {
  if (!value) {
    formState.picture_categ_id = undefined
    formState.picture_subcateg_id = undefined
    return false
  }
  formState.picture_categ_id = value[0]
  formState.picture_subcateg_id = value[1]
}
const handlePriceChange = () => {
  formState.picture_price = undefined
  basicRef.value.clearValidate('picture_price')
}
//获取图集专辑数据
const getAlbumList = () => {
  atlas_album_list({ site_id: siteId, album_status: 1 }).then((res: any) => {
    res.albums.forEach((item: AlbumListData) => {
      albumList.value.push({
        label: item.album_name,
        value: item.album_id
      })
    })
  })
}
//根据分类查类型
const getTypeByClass = () => {
  if (!formState.picture_categ_id || formState.picture_categ_id === '0') return false
  atlas_type_byClass({ categ_id: formState.picture_categ_id }).then((res: any) => {
    typeList.value = res?.types ?? []
    if (typeList.value.length <= 0) return false
    typeList.value = typeList.value.map((item: any) => {
      return { value: item.type_id, label: item.type_name }
    })
  })
}
const handleChange = (value: string[]) => {
  console.log(`selected ${value}`)
}
//竖版封面事件
const handleVerticalTypeChange = () => {
  basicRef.value.clearValidate(['picture_cover_vertical'])
  formState.picture_cover_vertical = ''
  verticalPreviewImage.value = ''
}

//横版封面事件
const handleHorizontalTypeChange = () => {
  basicRef.value.clearValidate(['picture_cover_horizontal'])
  formState.picture_cover_horizontal = ''
  horizontalPreviewImage.value = ''
}
//横版
const onRowSearch = (searchValue: string) => {
  console.log('use value', searchValue)
}
const getRowImageInfo = (value: any) => {
  formState.picture_cover_horizontal = value
  if (formState.picture_cover_horizontal_type === 1) return (horizontalPreviewImage.value = baseUrl + value)
  horizontalPreviewImage.value = value
}
const handleHorizontalBlur = (e: any) => {
  horizontalPreviewImage.value = e.target.value
}
const handleVerticalBlur = (e: any) => {
  verticalPreviewImage.value = e.target.value
}
//竖版
const onLineSearch = (searchValue: string) => {
  console.log('use value', searchValue)
}
const getLineImageInfo = (value: any) => {
  formState.picture_cover_vertical = value
  if (formState.picture_cover_vertical_type === 1) return (verticalPreviewImage.value = baseUrl + value)
  verticalPreviewImage.value = value
}
//图片资源切换
const handleTypeChange = () => {
  formState.chapters.forEach((item, index) => {
    console.log('item: ', item)
    const obj = {
      chapter_no: item.chapter_no,
      chapter_name: '',
      picture_url: '',
      is_edit: false
    }
    Object.assign(item, obj)
  })
  console.log('formState.chapters: ', formState.chapters)
}
//计数
const getCount = (chapter_no: number) => {
  var count = 0
  formState.chapters.forEach((item: any) => {
    if (item.chapter_no == chapter_no) {
      count++
    }
  })
  return count
}
const isNumber = /^[0-9]*$/
//判断章节编号是否都为数字
const isOnlyNumber = () => {
  const flag = formState.chapters.every((item: any) => {
    return isNumber.test(item.chapter_no)
  })
  return flag
}
const handleInput = (item: any, index: number) => {
  console.log('item: ', item)
  // if (!(item.chapter_no + '').trim()) {
  //   item.chapter_no = index + 1
  //   return message.warning('章节不能为空')
  // }
  // if (chineseReg.test(item.chapter_no)) {
  //   item.chapter_no = index + 1
  // } else {
  //   console.log('item.chapter_no: ', item.chapter_no)
  //   if (!isNumber.test(item.chapter_no)) {
  //     item.chapter_no = index + 1
  //     return message.warning('章节编号只能输入数字')
  //   } else {
  //     if (getCount(item.chapter_no) > 1) {
  //       message.warning('修改失败，章节编号已存在')
  //       item.chapter_no = index + 1
  //       return false
  //     }
  //   }
  // }
}
//修改章节
const changeSection = (item: any, index: any) => {
  if (!item.is_edit) {
    item.is_edit = !item.is_edit
  } else {
    if (chineseReg.test(item.chapter_no)) {
      item.chapter_no = index + 1
    } else {
      console.log('item.chapter_no: ', item.chapter_no)
      if (!isNumber.test(item.chapter_no)) {
        item.chapter_no = index + 1
        return message.warning('章节编号只能输入数字')
      }
      if (getCount(item.chapter_no) > 1) {
        message.warning('修改失败，章节编号已存在')
        item.chapter_no = index + 1
        return false
      }
    }
    item.is_edit = !item.is_edit
  }
}
//是否是中文
const isChinese = (val: string) => {
  if (!chineseReg.test(val)) return false
  return true
}
//添加一组播放地址
const addAddress = () => {
  const len = formState.chapters.length - 1
  let no = 0
  if (!isChinese(formState.chapters[len].chapter_no)) {
    no = +formState.chapters[len].chapter_no + 1
  } else {
    no = formState.chapters.length + 1
  }
  formState.chapters.push({
    chapter_no: no + '',
    chapter_name: '',
    picture_url: '',
    is_edit: false,
    randomKey: Math.random()
  })
}

//清空
const clearAddress = (index: number) => {
  uploadRef.value[index].fileList = []
  formState.chapters[index].picture_url = ''
}
//反序
const reverseAddress = (index: number) => {
  const url = formState.chapters[index].picture_url
  const fileList = uploadRef.value[index].fileList
  formState.chapters[index].picture_url = url.split('\n').reverse().join('\n')
  uploadRef.value[index].fileList = fileList.reverse()
}
//删除
const deleteAddress = (index: number) => {
  const len = formState.chapters.length
  if (len === 1) return message.warning('没有数据能删除了喔!')
  formState.chapters.splice(index, 1)
  formState.chapters.forEach((item, index) => {
    if (!(item.chapter_no || item.chapter_no != '0')) item.chapter_no = (index + 1).toString()
  })
}
//图片返回
const getAtlasSrc = (urls: string[], index: number) => {
  formState.chapters[index].picture_url = urls.join('\n')
}
//重置表单
const resetFormFunc = () => {
  basicRef.value?.resetFields()
  formState.picture_categ_id = undefined
  formState.picture_subcateg_id = undefined
  formState.chapters = [
    {
      chapter_no: '1',
      chapter_name: '',
      picture_url: '',
      is_edit: false
    }
  ]
  uploadRef.value.fileList = []
  formState.picture_cover_horizontal = undefined
  formState.picture_cover_horizontal_type = 1
  formState.picture_cover_vertical = undefined
  formState.picture_cover_vertical_type = 1
  //重置扩展信息
  formState.picture_keyword = undefined
  formState.picture_tags = undefined
  formState.picture_pop_add_star = 0
  formState.picture_pop_star = 0
  formState.picture_tags_copy = undefined
  isPopularity.value = false
  resetExtendFunc()
}
//开始上传
const startUpload = (index: number) => {
  uploadRef.value[index].handleUpload()
}
//是否展示图集类型
const showFilmType = computed(() => {
  if (formState.picture_categ_id && formState.picture_categ_id != '0') return true
  return false
})

//获取图集详情
const getAtlasDetail = () => {
  detail_atlas({ picture_id: pictureId.value }).then((res: any) => {
    res.chapters.forEach((item: chaptersItem, i: number) => {
      item.is_edit = false
      item.randomKey = Math.random()
    })
    if (res.picture_categ_id != '0') {
      classList.value?.push(res.picture_categ_id)
    }
    if (res.picture_subcateg_id != '0') {
      classList.value?.push(res.picture_subcateg_id)
    }
    Object.assign(formState, res)
    if (res.publish_state === 0) {
      formState.publish_state = 1
    }
    //扩展信息是否开启补偿
    if (formState.picture_pop_compensated === 1) {
      isPopularity.value = true
    } else {
      isPopularity.value = false
    }
    if (formState?.picture_name ?? ''.length > 50) formState.picture_name = formState?.picture_name?.substring(0, 49)
    if (formState?.picture_introduction ?? ''.length > 50)
      formState.picture_introduction = formState?.picture_introduction?.substring(0, 49)
    if (formState?.picture_author ?? ''.length > 50)
      formState.picture_author = formState?.picture_author?.substring(0, 49)
    if (formState.picture_cover_vertical) {
      if (formState.picture_cover_vertical_type === 1) {
        verticalPreviewImage.value = baseUrl + formState.picture_cover_vertical
      } else if (formState.picture_cover_vertical_type === 2) {
        verticalPreviewImage.value = formState.picture_cover_vertical
      } else {
        formState.picture_cover_vertical_type = 1
      }
    } else {
      formState.picture_cover_vertical_type = 1
    }
    if (formState.picture_cover_horizontal) {
      if (formState.picture_cover_horizontal_type === 1) {
        horizontalPreviewImage.value = baseUrl + formState.picture_cover_horizontal
      } else if (formState.picture_cover_horizontal_type === 2) {
        horizontalPreviewImage.value = formState.picture_cover_horizontal
      } else {
        formState.picture_cover_horizontal_type = 1
      }
    } else {
      formState.picture_cover_horizontal_type = 1
    }
    formState.picture_album_ids = res.picture_album.map((item: any) => {
      return item.album_id
    })
    formState.picture_tags_copy = res.picture_tags.map((item: any) => {
      return item.tag_name
    })
    formState.type_ids = res.picture_types.map((item: any) => {
      return item.type_id
    })
  })
}
const validateFunc = () => {
  const params = { ...formState }
  basicRef.value
    .validate()
    .then(() => {
      if (!isOnlyNumber()) return message.warning('章节编号只能输入数字')
      if (!pictureId.value) {
        params.site_id = siteId
        add_atlas(params).then(() => {
          message.success('保存图集成功')
          router.back()
          resetFormFunc()
        })
      } else {
        params.picture_id = pictureId.value
        update_atlas(params).then(() => {
          message.success('编辑图集成功')
          router.back()
          resetFormFunc()
        })
      }
    })
    .catch(() => {
      message.warning('请检查必填项是否完整')
    })
}
//页面改变重置扩展信息
watch(
  () => route.name,
  () => {
    resetFormFunc()
  },
  {
    deep: true
  }
)
//根据分类查类型
watch(
  () => formState.picture_categ_id,
  (val, oldVal) => {
    if (val != oldVal && val != '0') getTypeByClass()
  },
  {
    deep: true
  }
)
defineExpose({ validateFunc })
onMounted(() => {
  getClassList() //获取分类下拉
  getAlbumList() //获取专辑下拉
  pictureId.value = router.currentRoute.value.query?.id as string
  console.log('pictureId.value: ', pictureId.value)
  if (!pictureId.value) return false
  getAtlasDetail()
})
</script>

<style lang="less">
.ant-tooltip-inner {
  width: fit-content;
}
</style>
<style lang="less" scoped>
.page-basic {
  :deep(.ant-form) {
    .page-basic-hasBtn {
      display: flex;
      flex-wrap: wrap;
      width: 90%;

      .ant-form-item-control-input-content {
        display: flex;
      }
    }

    .page-basic-classify {
      display: flex;
      flex-wrap: wrap;
      width: 90%;
    }

    .page-basic-three-column {
      width: 90%;
      border-bottom: 1px solid #f0f0f0;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .page-basic-filmType {
      width: 90%;
      display: flex;
      flex-wrap: wrap;

      .ant-checkbox-wrapper {
        margin: 4px 0;
      }
    }

    .page-basic-common {
      width: 90%;
      padding: 24px 0 0;
      box-sizing: border-box;
      border-bottom: 1px solid #f0f0f0;

      &-title {
        font-size: 16px;
        color: #262626;
        letter-spacing: 1.14px;
        font-weight: 500;
        margin-bottom: 24px;
      }

      .ant-table .ant-table-container::after {
        width: 0px;
      }

      .address-content {
        width: 100%;
        margin-left: 72px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        &-file {
          width: 48%;
          margin: 28px 0 0;

          &-top {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            .left-title {
              display: flex;
              align-items: center;
              margin: 2px 0;

              &-title {
                font-size: 14px;
                color: #262626;
                letter-spacing: 0;
                margin-left: 10px;
                display: flex;
                align-items: center;

                div {
                  min-width: 44px;
                  text-align: center;
                }
              }

              .ant-btn {
                margin: 0 16px;
              }
            }

            .right-btn {
              display: flex;
              align-items: center;
              margin: 2px 0;

              .ant-btn {
                height: 26px;
              }

              .ant-btn:not(:last-child) {
                margin-right: 8px;
              }

              .ant-btn:last-child {
                background: rgba(254, 76, 77, 0.08);
                border: 1px solid rgba(254, 76, 77, 1);
              }
            }
          }

          &-textarea {
            min-height: 160px;
            margin: 8px 0 9px;

            textarea {
              min-height: 160px;
            }
          }

          &-addressText {
            width: 100%;
            min-height: 160px;
            margin: 8px 0 9px;
            border: 1px solid rgba(217, 217, 217, 1);
            border-radius: 3px;
            min-height: 160px;
            padding: 10px;

            &-images {
              width: 100%;
              // min-height: calc(100% - 44px);
              overflow: scroll;
              max-height: 340px;
            }

            &-buttons {
              width: 100%;
              display: flex;
              justify-content: flex-end;
              border-top: 1px solid #f0f0f0;
              height: 44px;

              .ant-btn {
                margin-right: 10px;
                margin-top: 11px;
              }
            }
          }
        }

        &-url {
        }
      }

      .source-introduce {
        font-size: 12px;
        color: #bfbfbf;
        margin-top: 8px;
      }

      .ant-form-item-control-input-content {
        display: flex;

        .ant-radio-group {
          margin: 5px 0 15px !important;
        }
      }
    }
  }

  .bottom-button {
    display: flex;

    .ant-btn {
      margin: 24px 16px 0 0;
    }
  }
}
</style>
